<template>
  <div id="supervisionInformation" class="app-container">
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="施工单位" name="1"></el-tab-pane>
        <el-tab-pane label="监理单位" name="2"></el-tab-pane>
        <!-- <el-tab-pane label="成功初审" name="3"></el-tab-pane> -->
      </el-tabs>
    </div>
    <el-form :inline="true" label-position="right" label-width="90px" class="demo-form-inline">
      <el-form-item label="开始时间">
        <el-date-picker
          style="width: 200px;"
          v-model="listQuery.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间">
        <el-date-picker
          style="width: 200px;"
          v-model="listQuery.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData(1)" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-if="activeName=='1'"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
      <el-table-column prop="companyName" label="施工单位" align="center"></el-table-column>
      <el-table-column prop="time" label="施工时间" align="center"></el-table-column>
      <el-table-column prop="place" label="施工位置位置" align="center"></el-table-column>
      <el-table-column prop="detail" label="施工内容" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="toSee(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="activeName=='2'"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
      <el-table-column prop="companyName" label="监理单位" align="center"></el-table-column>
      <el-table-column prop="time" label="监理时间" align="center"></el-table-column>
      <el-table-column prop="place" label="监理位置位置" align="center"></el-table-column>
      <el-table-column prop="detail" label="监理内容" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="toSee(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="listQuery.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  getOrganizationImplementation,
  getOrganizationImplementation1
} from "@/api/feasibilityStudy/supervisionInformation.js";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeName: "1",
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectId: localStorage.getItem('projectId') * 1,
        startTime: "",
        endTime: ""
      },
      total: 0, //总数
      selectData: [],

      isCel: true
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //前往查看
    toSee(row) {
      let photoList = [];
      let vcrList = [];
      let voiceList = [];
      if (row.photo) {
        JSON.parse(row.photo).forEach(a => {
          photoList.push(a.fileId);
        });
      }
      if (row.vcr) {
        JSON.parse(row.vcr).forEach(a => {
          vcrList.push(a.fileId);
        });
      }
      if (row.voice) {
        JSON.parse(row.voice).forEach(a => {
          voiceList.push(a.fileId);
        });
      }
      let data = {
        page: 1,
        size: 10000,
        photo: photoList.join(","),
        vcr: vcrList.join(","),
        voice: voiceList.join(",")
      };
      localStorage.setItem("detailData", JSON.stringify(data));
      let title = "项目施工实施"
      if (this.activeName === "2") {
        title = "项目监理实施"
      }
      this.$router.push({
        path: "/project1/projectOrganization/supervisionInformation/detail",
        query: {
          // type: type,
          time: row.time,
          title: title
        }
      });
    },
    getData(type) {
      //获取页面信息
      if (type) {
        //如果是搜索则回到第一页
        this.listQuery.page = 1;
      }
      this.listLoading = true;
      if (this.activeName === "1") {
        getOrganizationImplementation(this.listQuery)
          .then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          })
          .catch(error => {
            this.listLoading = false;
          });
      } else if (this.activeName === "2") {
        getOrganizationImplementation1(this.listQuery)
          .then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          })
          .catch(error => {
            this.listLoading = false;
          });
      }
    },
    //改变每页显示条数
    handleSizeChange(e) {
      this.listQuery.size = e;
      this.getData();
    },
    //改变页码
    handleCurrentChange(num) {
      this.listQuery.page = num;
      this.getData();
    },
    handleClick(tab, event) {
      //切换tab
      this.listQuery = {
        page: 1,
        size: 10,
        projectId: localStorage.getItem("projectId") * 1,
        landId: "",
        applicantName: "",
        startTime: "",
        endTime: ""
      };
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
#supervisionInformation /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
